@extends('admin::layouts.master')
@section('title') 检测机构开放日期列表 @endsection
@section('tab')
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="开始日" value="{{$data['start']}}" lay-verify="required" name="start" id="start">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="截止日" value="{{$data['end']}}" name="end" id="end">
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="searchBtn"><i class="layui-icon">&#xe615;</i></button>
                            <a class="layui-btn" onclick="location.reload()">
                                <i class="layui-icon layui-icon-refresh"></i>
                            </a>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <button class="layui-btn layui-btn-normal" onclick="xadmin.open('添加开放日期','{{route('admin_checkpoint_create')}}')">
                            <i class="layui-icon "></i>添加
                        </button>
                    </div>

                    <table class="layui-table" lay-data="{url:'admin-checkpoint-getDayLists',id:'test3',page:true,limit: 20 ,limits: [20, 50, 100]}" lay-filter="test3">
                        <thead>
                        <tr>
                            <th lay-data="{field:'id', width:80}">ID</th>
                            <th lay-data="{field:'day', sort: true}">开放日期</th>
                            <th lay-data="{field:'am_time', edit: 'text'}" >上午时间段</th>
                            <th lay-data="{field:'am_num', edit: 'text'}">上午可检测数量</th>
                            <th lay-data="{field:'am_order', width:100}">上午已预约</th>
                            <th lay-data="{field:'pm_time', edit: 'text'}">下午时间段</th>
                            <th lay-data="{field:'pm_num', edit: 'text'}">下午可检测数量</th>
                            <th lay-data="{field:'pm_order', width:100}">下午已预约</th>
                            <th lay-data="{field:'created_at'}">创建时间</th>
                            <th lay-data="{field:'right', toolbar:'#options', width:80}">操作</th>
                        </tr>
                        </thead>
                    </table>
                    <script type="text/html" id="options">
                        <div class="layui-btn-group">
                            <a lay-event="del"><i class="layui-icon">&#xe640;</i></a>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('tab_js')
    <script>
        layui.use(['laydate', 'form', 'table'],
            function () {
                var laydate = layui.laydate;
                var table = layui.table;

                //监听单元格编辑
                table.on('edit(test3)', function(obj){
                    var value = obj.value //得到修改后的值
                        ,data = obj.data //得到所在行所有键值
                        ,field = obj.field; //得到字段

                    if(field == 'am_num' || field == 'pm_num'){
                        if(isNaN(value)){
                            layer.msg('请填写数字');
                            return false;
                        }
                    }

                    if (value){
                        editTabal(data.id, field, value);
                    } else{
                        layer.msg('请填写修改项');
                    }

                });

                //监听单元格删除
                table.on('tool(test3)', function(obj){
                    var data = obj.data,
                        layEvent = obj.event;
                    if(layEvent === 'del'){
                        layer.confirm('确定删除已有数据吗？', {btn: ['确定', '取消']}, function () {
                            $.ajax({
                                type: "PUT",
                                url: "admin-checkpoint-delDate/" + data.id,
                                dataType: "json",
                                async: false,
                                success: function (obj) {
                                    if (obj.state === 0) {
                                        layer.msg(obj.msg, {time: 1000, icon: 6}, function () {
                                            table.reload('test3')
                                        });
                                    } else {
                                        layer.msg(obj.msg, {time: 1000, icon: 5});
                                    }
                                }, error: function () {
                                    alert("发生错误：");
                                }
                            });
                        });
                    }
                });

                $("#searchBtn").click(function () {
                    var start = $("#start").val();
                    var end = $("#end").val();
                    table.reload('test3',{
                        where:{start,end},
                        page:{curr:1}
                    })
                });

                //编辑
                function editTabal(id, field, value){
                    $.ajax({
                        url: js_url('admin-checkpoint-update'),
                        type: 'post',
                        data: {id:id, field:field, value:value},
                        dataType: "json",
                        success: function (result) {
                            if (result.state === 0) {
                                layer.msg(result.msg, {time: 600, icon: 6});
                            } else {
                                layer.msg(result.msg, {time: 600, icon: 5});
                            }
                        }
                    });
                }

                //执行一个laydate实例
                laydate.render({
                    elem: '#start' //指定元素
                    ,done: function(value){
                        var end = $('#end').val();
                        if (end && value > end) {
                            layer.msg('开始日必须小于截止日');
                            $('#start').val('');
                        };
                    }
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#end' //指定元素
                    ,done: function(value){
                        var start = $('#start').val();
                        if (start && value < start) {
                            layer.msg('截止日必须大于开始日');
                            $('#end').val('');
                        };
                    }
                });

            }
        );

    </script>
@endsection




